import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { actionCreators } from '../store';

import { Modal, Input, Button, Table, Menu, Dropdown, InputNumber, Popconfirm } from 'antd';
import { DownOutlined } from '@ant-design/icons';

const { Column } = Table;

class taskHistory extends Component{
  state={
    page: 10,
  };

  changePage = (value) => {
    this.setState({page:value});
  }

  getTaskLog = (taskId) => {
    this.props.getTaskLog(taskId);
  }

  componentDidMount(){
    this.props.onRef(this);
    let username = "admin";//待修改
    this.props.getHistoryTaskList(username);
  }

  render(){
    const { page } = this.state;
    return (
      <div>
        <Table pagination={{pageSize:page,showSizeChanger:false}}
        dataSource={this.props.historyTasks}>
          <Column title="序号" render={(text, record, index)=><span>{index+1}</span>}/>
          <Column title="服务编号" dataIndex="taskId" key="taskId"/>
          <Column title="服务名称" dataIndex="taskName" key="taskName"/>
          <Column title="采集周期" dataIndex="taskTypeName" key="taskTypeName"/>
          <Column title="运行状态" dataIndex="taskStatus" key="taskStatus"/>
          <Column title="创建时间" dataIndex="createDate" key="createDate"/>
          {/* <Column title="源数据库连接" dataIndex="sourceName" key="sourceName"/>
          <Column title="目标数据库连接" dataIndex="targetName" key="targetName"/> */}
          <Column title="操作" dataIndex="operation" key="operation"
          render={(text,record)=>(
            <span>
              <Button type="link">查看</Button>
              <Button type="link" onClick={this.getTaskLog(record.taskId)}>日志详情</Button>
            </span>
          )}/>
        </Table>
        <div className={this.props.historyTasks.length>0?'footer':'withoutPagination'}>
          显示<InputNumber min={1} defaultValue={page} onChange={this.changePage}/>项结果，共{this.props.historyTasks.length}项
        </div>
        <Modal
          title="日志详情"
          visible={this.state.visible}
          //bodyStyle={{ padding: '12px 24px' }}
          // onOk={() => {
          //   this.formRef.current
          //     .validateFields()
          //     .then(values => {
          //       this.handleOk(values);
          //     })
          //     .catch(info => {
          //       console.log('Validate Failed:', info);
          //     });
          // }}
          // onCancel={this.handleCancel}
        >
        </Modal>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    historyTasks: state.getIn(['task','historyTasks']).toJS(),
    taskLog: state.getIn(['tasks','taskLog']),
  }
}

const mapDispatchToProps = (dispatch) => ({
  getHistoryTaskList(username){
    dispatch(actionCreators.getHistoryTaskListOperation(username));
  },
  getTaskLog(taskId){
    dispatch(actionCreators.getTaskLogOperation(taskId));
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(taskHistory);